<template>
  <el-dialog
    title="添加白名单"
    :visible.sync="dialogFormVisible"
    top="5vh"
    width="55%"
  >
    <el-form
      ref="formInline"
      :inline="true"
      :model="formInline"
      :rules="rules"
      :label-position="labelPosition"
      label-width="100px"
      size="small"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="url地址:" prop="url">
            <el-input
              v-model="formInline.url"
              :style="{ width: '140%' }"
              placeholder="请输入url地址"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
           <el-form-item label="请求方式" prop="method">
              <el-select v-model="formInline.method" placeholder="请选择请求方式">
              <el-option
                v-for="item in methodOptions"
                :key="item.value"
                :label="item.name"
                :value="item.value">
              </el-option>
              </el-select>
            </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="备注:" prop="description">
            <el-input
              style="width: 140%"
              type="textarea"
              maxlength="125"
              show-word-limit
              v-model="formInline.description"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm('formInline')"
        >确 定</el-button
      >
      <el-button @click="resetForm('formInline')">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addWhiteListData } from "@/api/whiteList";
import { successMsg } from "@/utils/tools";
export default {
  name: "Insert",
  data() {
    return {
      dialogFormVisible: false,
      labelPosition: "right",
      methodOptions:[{
          name:'GET',
          value:0
        },{
          name:'POST',
          value:1
        },{
          name:'PUT',
          value:2
        },{
          name:'DELETE',
          value:3
        }],
      formInline: {
        url: "",
        method: "",
        enable_datasource: true,
        description: "",
      },
      rules: {
        url: [{ required: true, message: "请选择url地址", trigger: "change" }],
        method: [{ required: true, message: "请选择请求方式", trigger: "change" }],
        description: [
          {
            min: 0,
            max: 255,
            message: "长度在 0 到 255 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addWhiteListData(this.formInline).then((res) => {
            if (res.code === 2000) {
              successMsg(res.msg);
              this.$refs[formName].resetFields();
              this.$emit("reloadTable");
              this.dialogFormVisible = false;
            }
          });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogFormVisible = false;
    }
  },
};
</script>

<style>
.main-select-el-tree .el-tree-node .is-current > .el-tree-node__content {
  font-weight: bold;
  color: #409eff;
}
.main-select-el-tree .el-tree-node.is-current > .el-tree-node__content {
  font-weight: bold;
  color: #409eff;
}
.div_padding {
  padding: 5px 5px;
}
.label_padding1 {
  padding-left: 50px;
}
.label_padding2 {
  padding-left: 65px;
}
.input_width1 {
  width: 150%;
}
.input_width2 {
  width: 145%;
}
</style>
